<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>搜索关键词分析</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="echarts" ref="container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import testAx from '@/utils/testApiServer.js'
export default {
  name:'Search',
  data() {
    return {
    }
  },
  methods: {
    async getSerchData() {
      // 获取搜索量最高的歌曲
      const {data: res} = await testAx.get('/topserch')
      this.draw(res)
    },
    // echarts饼图绘制函数
    draw(data) {
      const option = {
        title: {
          text: '热门搜索',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '关键词：{b}</br>搜索次数：{c}'
        },
        legend: {
          top: 'bottom',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center',
              formatter: '{b}：{c}'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '36',
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      };
      var myCharts = echarts.init(this.$refs.container)
      myCharts.setOption(option)
    }
  },
  mounted() {
    this.getSerchData()
  },
}
</script>

<style>
.echarts {
  width: 1200px;
  height: 700px;
  margin: 80px auto;
}
</style>